/**
 * ============================================================================
 * 🎨 页面头部组件 (Header Component)
 * ============================================================================
 *
 * 组件说明：
 * 这是页面的头部导航栏组件，负责显示应用的顶部导航信息
 *
 * 主要职责：
 * 1. 渲染页面头部布局
 * 2. 显示应用标题或 Logo
 * 3. 提供导航功能
 * 4. 集成用户交互功能
 *
 * ============================================================================
 */

import './index.css'
import { useState } from 'react'
import { Button, Avatar, Dropdown, Menu } from 'antd'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons'
import LoginModal from '../LoginModal'
import { useSelector, useDispatch } from 'react-redux'
import type { RootState } from '../../store'
import { logout } from '../../store/userSlice'
import { useTranslation } from 'react-i18next'

/**
 * Header 组件
 *
 * @component 头部导航栏组件
 * @returns {JSX.Element} 返回头部组件 JSX
 *
 * @example
 * // 基础使用
 * <Header />
 *
 * 样式说明：
 * - className='Header' 使用 CSS 类 'Header' 进行样式定制
 * - 可在 index.css 中定义具体的样式
 */
const Index = () => {
	const [loginVisible, setLoginVisible] = useState(false)
	const dispatch = useDispatch()
	const { isLoggedIn, userInfo } = useSelector((state: RootState) => state.user)
	const { t } = useTranslation()

	const handleLogout = () => {
		dispatch(logout())
	}

	const userMenu = (
		<Menu items={[
			{
				key: '1',
				icon: <LogoutOutlined />,
				label: t('logout'),
				onClick: handleLogout
			}
		]} />
	)

	return (
		// 头部容器 - 使用 Header 类名进行样式定义
		<div className='Header'>
			{isLoggedIn ? (
				<div className="user-info">
					<span className="welcome-text">{t('welcome')}{userInfo?.nickname || userInfo?.username}</span>
					<Dropdown overlay={userMenu} placement="bottomRight">
						<Avatar
							src={userInfo?.avatar || userInfo?.avator}
							icon={<UserOutlined />}
							style={{ cursor: 'pointer' }}
						/>
					</Dropdown>
				</div>
			) : (
				<Button type="primary" onClick={() => setLoginVisible(true)}>{t('login')}</Button>
			)}
			<LoginModal
				visible={loginVisible}
				onClose={() => setLoginVisible(false)}
			/>
		</div>
	)
}

// 导出 Header 组件作为默认导出
export default Index